<template>
  <div>
    hello world {{name}}
    <h1 v-once>{{name}}</h1>
    <input
      type="text"
      v-model='name'
    >
    <div v-text='str'></div>
    <h2 v-for='(item,index) in ary'>
      item index 是自己定义的名字 {{item}}{{index}}
    </h2>
    <h3
      v-for='(item,key,index) in obj'
      :class="{box:1>2,box2:3>2,box3:true}"
      :style='{color:"red",fontSize:"30px"}'
      @click="add(item,$event)"
    >
      {{item}}{{key}}{{index}}
    </h3>

    <h1 v-if='10>2'>hello v-if</h1>
    <h2 v-else>hello v-else</h2>

    <ul v-pre>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>
</template>
<script>
// Vue 解析html模板 用于替换模板中的vue语法
/* 
  凡是 v-xxx的行内属性 统称为指令 指令后边若跟了某些值 那么这些值得vue变量
  v-model 表单元素（自定组件）value  input事件
  v-html    相当于原生的innerHTML(只能用在可信任的内容上，永远不用在用户提交的内容上)
  v-text    相当于原生的 innerText

  v-cloak 后不跟任何内容   解决小胡子的显示问题原理： 当vue渲染完成之前 v-cloak会作为一个普通的行内属性存在， 当vue渲染完成之后，会把这个指令移除
  v-pre 后不跟任何内容  优化性的指令 告诉vue哪个标签不用vue渲染
  
  
  v-for  循环的一个指令 可以艮数字 字母 对象  数组
  v-if    判断结构是否加载的一个指令（有比较大的切换开销）
  v-show  判断结构是否显示的一个指令（有比较大的初始加载开销）

  v-bind 专门用来处理行内属性的一个指令 简写一个 :
  v-on   专门用来处理事件的一个指令   简写成一个 @

*/
export default {
  data() {
    return {
      // data中的属性最终都会被劫持并且挂载到当前实例(this)上
      name: "珠峰",
      str: "<h1>666</h1>",
      ary: [111, 222, 3333, 444],
      obj: { q: 123, b: 345 },
      cla: "box",
    };
  },
  methods: {
    add() {
      // this 也是当前实例
      console.log(arguments);
      this.name = "珠峰6666";
    },
  },
  created() {
    console.log(this);
  },
};
</script>
<style lang="less">
</style>
